<template>
<div class="divRoot">
  <vue-particles
      color="#252754"
      :particleOpacity="0.4"
      :particlesNumber="40"
      shapeType="edge"
      :particleSize="2"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push">
  </vue-particles>
  <div class="root-header">
    <div style="flex: 1;height: 100%"></div>
    <div style="flex: 1;height: 100%"></div>
    <div class="root-header-img"></div>
  </div>
  <div class="root-body">
    <div class="root-body-login">
      <div class="root-body-login-box">
        <div class="login-box-item">
          <div class="login-box-item-head">
            账号
          </div>
          <div class="login-box-item-input">
            <el-input prefix-icon="User" v-model="account"></el-input>
          </div>
          <div class="login-box-item-head">
          </div>
        </div>
        <div class="login-box-item" style="margin-top: 20px;">
          <div class="login-box-item-head">
            密码
          </div>
          <div class="login-box-item-input">
            <el-input type="password" prefix-icon="Lock" v-model="password"></el-input>
          </div>
          <div class="login-box-item-head">
          </div>
        </div>
        <div class="login-box-item" style="margin-top: 20px;" v-show="register">
          <div class="login-box-item-head">
            确认
          </div>
          <div class="login-box-item-input">
            <el-input type="password" prefix-icon="Lock" v-model="passwordConfirm"></el-input>
          </div>
          <div class="login-box-item-head">
          </div>
        </div>
        <div class="login-box-item" style="margin-top: 20px;" v-show="register">
          <div class="login-box-item-head">
            昵称
          </div>
          <div class="login-box-item-input">
            <el-input prefix-icon="Place" v-model="nickName"></el-input>
          </div>
          <div class="login-box-item-head">
          </div>
        </div>
        <div class="login-box-item">
        </div>
        <div class="login-box-item">
          <div class="login-box-item-head">
          </div>
          <div class="login-box-item-input" style="display: flex;flex-direction: row;justify-content: space-between">
            <div class="login-button"><el-button type="primary" @click="loginAccount">登录</el-button></div>
            <div class="login-button"><el-button type="danger" @click="registerAccount">注册</el-button></div>
          </div>
          <div class="login-box-item-head">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="root-footer"></div>
</div>
</template>
<script>
import { ElMessage } from "element-plus";
import {post} from "@/http";
import router from "@/router";

function isStringEmpty(str){
  return (str === null || str.length === 0)
}

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data(){
    return{
      account: "",
      password: "",
      passwordConfirm: "",
      register: false,
      nickName: "",
    }
  },
  methods:{
    loginAccount(){
      if(this.register){
        this.register = false
      }else{
        if(isStringEmpty(this.account)){
          ElMessage.error("请填写账号")
        }else if(isStringEmpty(this.password)){
          ElMessage.error("请填写密码")
        }else{
          let params = new URLSearchParams()
          params.append("account", this.account)
          params.append("password", this.password)
          post("/api/reader/login", params).then(res=>{
            if(res.data.code !== 200){
              ElMessage.error(res.data.message)
            }else{
              ElMessage.success(res.data.message)
              window.sessionStorage.setItem("Id", res.data.data + ";" + (new Date().getTime()))
              router.push("/Reader/ReaderInfo")
            }
          })
        }
      }
    },
    registerAccount(){
      if(!this.register){
        this.register = true
      }else{
        if(isStringEmpty(this.account)){
          ElMessage.error("请输入账号")
        }else if(isStringEmpty(this.password)){
          ElMessage.error("请输入密码")
        }else if(isStringEmpty(this.passwordConfirm)){
          ElMessage.error("请确认密码")
        }else if(isStringEmpty(this.nickName)){
          ElMessage.error("请输入昵称")
        }else if(this.password !== this.passwordConfirm){
          ElMessage.error("两次密码不一致")
        }else{
          let params = new URLSearchParams()
          params.append("account", this.account)
          params.append("password", this.password)
          params.append("name", this.nickName)
          post("/api/reader/register", params).then(res=>{
            if(res.data.code !== 200){
              ElMessage.error(res.data.message)
            }else{
              ElMessage.success(res.data.message)
              window.sessionStorage.setItem("Id", res.data.data + ";" + (new Date().getTime()))
              router.push("/Reader/ReaderInfo")
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped>
#particles-js {
  /*calc(100% - 100px)*/
  width: 100%;
  height: calc(100% - 40px);
  position: absolute;
}
.divRoot{

  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("/src/assets/img/hero-back.png");
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.root-header{
  width: 100%;
  height: 270px;
  display: flex;
  padding-top: 30px;
  z-index: 9999;
}
.root-header-img{
  flex: 1;
  height: 100%;
  background-image: url("/src/assets/img/hero-fly.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  animation: flyFlash 2800ms ease-out infinite alternate;
}
.root-body{
  width: 100%;
  height: calc(100% - 320px);
  display: flex;
  justify-content: center;
}
.root-body-login{
  height: 100%;
  width: 360px;
  margin: auto 0;
  z-index: 9999;
}
.root-body-login-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  background: #ffffff;
  padding-top: 24px;
}
.login-box-item{
  height: 40px;
  width: 100%;
  display: flex;
  border-radius: 5px;
}
.login-box-item-head{
  width: 60px;
  height: 100%;
  padding-left: 10px;
  text-align: center;
  line-height: 40px;
}
.login-box-item-input{
  height: 100%;
  width: calc(100% - 105px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
}
.root-footer{
  width: 100%;
  height: 50px;
}


@keyframes flyFlash {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}
</style>